<template>
  <ContentWrap
    class="mb-0!"
    :class="[
      footer
        ? '!h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height)-10px)]'
        : '!h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-20px)]'
    ]"
    :bodyStyle="{ height: '100%', padding: '10px' }"
  >
    <div class="flex flex-col !h-full justify-between">
      <div class="flex">
        <slot name="tool"></slot>
      </div>
      <el-divider border-style="dashed" class="m-y-0!" />
      <el-scrollbar viewClass="flex-grow mt-10px">
        <el-row :gutter="10" class="mx-0px!">
          <el-col
            :xs="24"
            :sm="24"
            :md="24"
            :lg="24"
            :xl="24"
            v-for="(item, index) in list"
            :key="index"
          >
            <CartItem :spuItem="item" class="mb-10px! cursor-pointer">
              <template #extInfo>
                <div class="custom-text-14">
                  <!-- 销售时间:{{ item.payTime }} <el-divider direction="vertical" /> -->
                  可提货数量:
                  <span class="color-[var(--el-color-primary)]">x{{ item.count }}</span>
                </div>
              </template>

              <template #itemButton>
                <el-row>
                  <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="!w-full flex justify-end">
                      &nbsp;
                      <!-- <el-checkbox :key="index" :value="item" @change="handleCheckBoxChange" /> -->
                    </div>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="!w-full flex justify-end mt-10px">
                      <el-input-number
                        class="meton-input-number"
                        v-model="item.count"
                        @click.stop="() => {}"
                        :min="1"
                        @change="
                          (val: number) => {
                            handleChangeNumber(item, val)
                          }
                        "
                      />
                    </div>
                  </el-col>
                </el-row>
              </template>
            </CartItem>
            <el-divider border-style="dashed" class="my-10px!" />
          </el-col>
        </el-row>
      </el-scrollbar>

      <div class="flex justify-end">
        <slot name="bottom"></slot>
      </div>
    </div>
  </ContentWrap>
</template>
<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'
import { useAppStore } from '@/store/modules/app'

const appStore = useAppStore()
const footer = computed(() => appStore.getFooter)
/** 员工选择 */

const emit = defineEmits(['handleChangeNumber', 'handleCheckBoxChange'])
defineOptions({ name: 'CartList' })
defineProps({
  // 选中的门店列表
  list: propTypes.arrayOf(propTypes.object).def([]),
  rebateType: propTypes.number
})
import CartItem from './CartItem.vue'

const handleChangeNumber = (item: any, value: number) => {
  emit('handleChangeNumber', item, value)
}
const handleCheckBoxChange = () => {
  emit('handleCheckBoxChange')
}
</script>
<style lang="scss" scoped>
.meton-input-number {
  .el-input {
    font-size: 16px;
  }
  .el-input__inner {
    font-weight: bold;
  }
}
:deep(.el-checkbox-group) {
  line-height: unset !important;
}
</style>
